<template>
  <a-card style="margin-top: 12px" :bordered="true" title="育人与服务">
    <div slot="extra">
      总分: <i style='font-style: normal;color: rgba(0, 0, 0, 0.85);font-weight: 500;font-size: 16px;'>{{ score.score }}</i>
      <a-button style="margin-left: 20px" :icon="this.getIconShow" @click="showButtomShow"> {{ this.getButtomShow }}</a-button>
    </div>
    <div v-show="isShow">
      <education-and-service-items :teacher-info="{workNo:this.userName,date:this.date}" :disabled="true"></education-and-service-items>
    </div>
  </a-card>
</template>

<script>

import EducationAndServiceItems from '@views/gfxy/educationandservice/modules/EducationAndServiceItems'
import { getAction } from '@api/manage'

export default {
  name: 'teacherResultService',
  components: {
    EducationAndServiceItems,
  },
  props: {
    userName: {
      type: String,
      required: true
    },
    date:{
      type:String,
      required: true
    },
    teacherCount:{
      type: Object,
      required: true
    },
    score:{
      type: Object,
      required: true
    },
  },

  data(){
    return {
      totalScore:0.0,
      isShow:false,
    }
  },
  computed:{
    getButtomShow(){
      if(this.isShow){
        return "隐藏详情"
      } else {
        return "显示详情"
      }
    },
    getIconShow(){
      if(this.isShow){
        return "up-circle"
      } else {
        return "down-circle"
      }
    }
  },
  methods: {
    showButtomShow(){
      this.isShow = !this.isShow
    },
  },
  mounted() {

  }
}
</script>

<style lang="less" scoped>
.list-content-item {
  color: rgba(0, 0, 0, .45);
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  margin-left: 40px;
span {
  line-height: 20px;
}
p {
  margin-top: 4px;
  margin-bottom: 0;
  line-height: 22px;
}
}
</style>